<template>
  <div class="content">
    <!-- 大图片 -->
    <div class="toptu" :style="top_img">
      <img src="../assets/image/logo2.png" alt="" />
    </div>
    <!-- dabox -->
    <div class="dabox">
      <img :src="company_logo" alt="" />
      <p v-html="note"></p>
    </div>
    <div class="shiming" v-html="company_show"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      top_img: { background: '' },
      note: '',
      company_logo: '',
      company_show: '',
      product_list: []
    }
  },
  mounted() {
    this.getgongsiInfo()
  },
  methods: {
    async getgongsiInfo() {
      const res = await this.axios.get('/api/bdweb/company')
      console.log(res.data.data)
      this.top_img.background = `url(${res.data.data.img.top_img})`
      this.note = res.data.data.note
      this.company_logo = res.data.data.company_logo
      this.company_show = res.data.data.company_show
    }
  }
}
</script>
<style scoped>
.content {
  width: 1920px;
  position: relative;
}
.toptu {
  width: 1920px;
  height: 750px;
  background: no-repeat top left;
  background-size: 100% 100%;
  position: relative;
}
.toptu img {
  width: 213px;
  height: 92px;
  position: absolute;
  top: 272px;
  left: 218px;
}
.toptu .title {
  position: absolute;
  top: 389px;
  left: 218px;
  font-size: 50px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  width: 800px;
}
.toptu .title1 {
  position: absolute;
  top: 451px;
  left: 218px;
  font-size: 30px;
  font-family: Helvetica;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
  width: 800px;
}
.dabox {
  width: 1478px;
  height: 529px;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 0.6);
  border-radius: 15px;
  position: absolute;
  top: 575px;
  left: 221px;
  text-align: center;
  box-sizing: border-box;
}
.dabox > img {
  width: 184px;
  height: 71px;
  margin: 50px auto 70px auto;
}
.dabox > p {
  padding: 0 115px;

  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #2b2b2b;
  line-height: 30px;
}
.shiming {
  margin: 460px auto 50px auto;
  width: 1920px;
  text-align: center;
  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
  position: relative;
}
/* .shiming > .shiminghz {
  z-index: 9999;
}
.shiming > .dingweishiming {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: inherit;
  font-size: 60px;
  font-family: Helvetica;
  font-weight: bold;
  color: #cccccc;
  line-height: 23px;
  opacity: 0.6;
}
.shimingdetail {
  margin: 80px auto;
  text-align: center;
  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
}
.shiming2 {
  margin: 154px auto 30px auto;
}
.yuanjingtupian {
  width: 1920px;
  height: 500px;
  background: url('../assets/image/bg1.png') no-repeat top left;
  background-size: 100% 100%;
  box-sizing: border-box;
}
.yuanjingtupian > h5 {
  padding: 180px 0 0 186px;
  font-size: 45px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 60px;
}
.yuanjingtupian2 {
  width: 1920px;
  height: 500px;
  background: url('../assets/image/bg2.png') no-repeat top left;
  background-size: 100% 100%;
  box-sizing: border-box;
}
.yuanjingtupian2 > h6 {
  padding: 221px 0 0 577px;
  font-size: 45px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 60px;
} */
</style>
